<template>
	<div class="card-container">
		<div class="card-layout">
			<div class="card-top-view">{{ chartTitle }}</div>
			<table style="width: 100%;margin-top: 11px;font-size: 12px;">
				<tr class="table-title-line">
					<th v-for="(item, index) in tableTitles" :style="{ width: item.width }" v-html="item.titleH5"></th>
				</tr>
				<tr class="table-content-line" :class="{ 'table-content-line_bottom': dataIdx == tableList.length - 1 }" v-for="(dataItem, dataIdx) in tableList"
				 :style="{ background: computeLineColor(dataIdx, tableList.length) }">
					<td v-for="(item, index) in tableTitles" :class="{ 'table-content-column_next': index != 0 }" :style="{ width: item.width }">
						{{ dataItem[item.key] }}
					</td>
				</tr>
			</table>

			<div class="table-empty-view ver-layout-center-all" v-if="tableList == null || tableList.length <= 0">
				暂无数据
			</div>
			<div style="height: 3px"></div>
		</div>
	</div>
</template>

<script src="./indexJs.js"></script>

<style scoped>
	.card-layout {
		padding-bottom: 0px;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
		border-radius: 10px;
	}

	.table-title-line {
		height: 44px;
		background: #e8edf9;
	}

	.table-content-line {
		height: 37px;
		text-align: center;
	}

	.table-content-line_bottom {
		height: 34px;
	}

	.table-content-column_next {
		border-left: 1px solid #e8e9ee;
	}

	.table-empty-view {
		height: 100px;
		text-align: center;
		line-height: 100px;
	}
</style>
